<script lang="ts">
import router from '@/router';
import { onMounted, ref } from 'vue';
import { billStore } from '../stores/bill';
import * as echarts from 'echarts';
import { toRaw } from 'vue';

export default {
    setup() {
        const chart: any = ref();

        let billsj: any = toRaw(billStore().$state.bill);

        let flan = ref(true);

        let timber = 0;
        let labour = 0;
        let furniture = 0;
        let electricity = 0;
        let other = 0;

        let echartsFun = () => {
            if (billsj.length > 0) {
                flan.value = true;
            } else {
                flan.value = false;
            }

            billsj.forEach((item: any) => {
                if (item.genre == "建材") {
                    timber += item.money;
                }
                if (item.genre == "人工") {
                    labour += item.money;
                }
                if (item.genre == "家具") {
                    furniture += item.money;
                }
                if (item.genre == "电器") {
                    electricity += item.money;
                }
                if (item.genre == "其他") {
                    other += item.money;
                }
            })
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(chart.value);

            // 指定图表的配置项和数据
            const option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: '80%'
                },
                series: [
                    {
                        name: '支出',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: timber, name: '建材' },
                            { value: labour, name: '人工' },
                            { value: furniture, name: '家具' },
                            { value: electricity, name: '电器' },
                            { value: other, name: '其他' }
                        ]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }


        let goPage = () => {
            router.back();
        }


        onMounted(() => {
            console.log(billStore().$state.bill);
            echartsFun();
        })

        return {
            goPage,
            chart,
            flan,
            billsj,

        }
    }
}
</script>


<template>
    <div class="billdatail">
        <div class="billdatail_title">
            <img src="../assets/images/billdatail/com_taobao_nb_sdk_web_view_title_bar_back.9.png" @click="goPage">
            账单明细
        </div>
    </div>
    <div class="billdatail_con" v-if="!flan">
        <img src="../assets/images/billdatail/bg_talk_empty.png">
        <p>在每一项代办中都可以记录哦</p>
    </div>
    <div class="billdatail_con-it" v-if="flan">
        <div ref="chart" class="baildatail_chart" style="width: 100%;height:300px;"></div>
        <div class="billdatail_con_list">
            <div class="billdatail_con_item" v-for="(item, index) in billsj" :key="index">
                <p>{{ item.timer }}</p>
                <div class="billreocrd_item_bot">
                    <div class="billrecord_item_left">
                        <img src="../assets/images/Billrecord/ic_deco_diary_good_empty.png">
                        <div>
                            <span>{{ item.costname }}</span>
                            <span>{{ item.genre }}</span>
                        </div>
                    </div>
                    <div class="billrecord_item_right">-{{ " " + (item.money).toFixed(2) }}</div>
                </div>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.billdatail_title {
    position: sticky;
    top: 0;
    right: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #fff;

    img {
        position: absolute;
        top: 0;
        left: 12px;
        margin-top: 10px;
        width: 20px;
        height: 20px;
    }
}

.billdatail_con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 625px;
    background-color: #f7f8fa;

    img {
        width: 200px;
        height: 200px;
        display: block;
    }

    p {
        font-size: 14px;
        color: #999;
    }
}

.billdatail_con-it {
    background-color: #eee;

    .baildatail_chart {
        background-color: #fff;
    }
}

.billdatail_con_list {
    margin-top: 10px;
    padding: 0px 12px;
    background-color: #fff;

    .billdatail_con_item {
        padding: 20px 0px;
        border-bottom: 1px solid #ccc;

        p {
            color: #999;
        }
    }

    .billreocrd_item_bot {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .billrecord_item_left {
            display: flex;
            align-items: center;
        }

        .billrecord_item_left img {
            width: 50px;
            height: 50px;
            display: inline-block;
            border: 1px solid #eee;
            border-radius: 5px;
        }

        .billrecord_item_left div {
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 50px;
        }

        .billrecord_item_left div span {
            display: block;
            height: 100%;
        }

        .billrecord_item_left div span:last-child {
            color: #999;
            font-size: 14px;
        }

        .billrecord_item_right {
            font-size: 18px;
            font-weight: 600;
        }
    }
}
</style>